<template>
  <a-layout-sider class="sidebar" width="200">
    <a-menu mode="inline" default-selected-keys="['1']" style="height: 100%; border-right: 0">
      <a-menu-item key="1">
        <template #icon>
          <SmileOutlined />
        </template>
        <span>
          <router-link to="/home">{{ $t("ui.sidebar.welcome") }}</router-link>
        </span>
      </a-menu-item>
      <a-menu-item key="2">
        <template #icon>
          <TableOutlined />
        </template>
        <span>
          <router-link to="/list">{{
            $t("ui.sidebar.queryTable")
            }}</router-link>
        </span>
      </a-menu-item>
      <a-sub-menu key="management" :title="$t('ui.sidebar.management')">
        <template #icon>
          <DesktopOutlined />
        </template>
        <!-- <a-menu-item key="3">
          <span>
            <router-link to="/management">{{
              $t("ui.sidebar.secondaryManagement")
            }}</router-link>
          </span>
        </a-menu-item> -->
        <!-- 可以添加更多子菜单项 -->
      </a-sub-menu>
      <a-menu-item key="4">
        <template #icon>
          <DesktopOutlined />
        </template>
        <span>
          <router-link to="/about">{{ $t("ui.sidebar.about") }}</router-link>
        </span>
      </a-menu-item>
      <!-- 添加更多菜单项 -->
      <!-- <a-menu-item key="5">
        <template #icon>
          <DesktopOutlined />
        </template>
        <span>
          <router-link to="/parking-overview">{{
            $t("ui.navigation.parkingOverview")
          }}</router-link>
        </span>
      </a-menu-item>
      <a-menu-item key="6">
        <template #icon>
          <DesktopOutlined />
        </template>
        <span>
          <router-link to="/video-statistics">{{
            $t("ui.navigation.videoStatistics")
          }}</router-link>
        </span>
      </a-menu-item> -->
    </a-menu>
  </a-layout-sider>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Layout, Menu } from "ant-design-vue";
import {
  DesktopOutlined,
  TableOutlined,
  SmileOutlined,
} from "@ant-design/icons-vue";
export default defineComponent({
  name: "SideBar",
  components: {
    SmileOutlined,
    DesktopOutlined,
    TableOutlined,
    "a-layout-sider": Layout.Sider,
    "a-menu": Menu,
    "a-menu-item": Menu.Item,
    "a-sub-menu": Menu.SubMenu,
  },
});
</script>

<style scoped>
/* 这里可以添加SideBar的样式 */
.sidebar {
  position: fixed;
  /* 使侧边栏固定 */
  top: 64px;
  /* 根据NavBar的高度调整，假设NavBar高度为64px */
  left: 0;
  height: calc(100% - 64px);
  /* 减去NavBar的高度，以确保侧边栏占满剩余高度 */
  background-color: var(--bg-color);
  /* 设置背景颜色 */
  z-index: 1000;
  /* 确保侧边栏在其他内容之上 */
}
</style>
